<!--
@description: FieldQRcode.vue
@author: liujiabin01
@time:2025/5/16 15:54
-->

<template>
  <van-field :label="label" class="field-qrcode">
    <template #input>
      <canvas id="canvas" ref="canvas"></canvas>
    </template>
  </van-field>
</template>

<script>
import QRCode from 'qrcode'

export default {
  name: 'FieldQRcode',
  props: {
    label: {
      type: String,
      default: '二维码'
    },
    value: {
      type: String,
      default: ''
    }
  },
  // 监听属性
  watch: {
    value: {
      handler (nv, ov) {
        let _this = this
        _this.$nextTick(() => {
          QRCode.toCanvas(_this.$refs['canvas'], nv, function (error) {
            if (error) console.error(error)
            console.log('QRCode success!');
          })
        })
      },
      immediate: true
    }
  },
  // 渲染执行
  mounted () {

  }
}
</script>

<style scoped>

</style>
